import { Card } from 'antd'
import * as echarts from 'echarts';
import React, { useEffect, useState } from 'react'
import PageBreadcrumb from '../../components/PageBreadcrumb'
import { getChart } from '../../api/reports.js'

const Reports = () => {
  const [dataList, setDataList] = useState([])

  useEffect(() => {
    createChart()
  }, [])

  const createChart = async () => {
    const data = await getChart()
    setDataList(data)
    const xAxis = data.xAxis[0].data
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    let option = {
      title: {
        text: '用户来源'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: dataList.legend,
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: dataList.series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  return (
    <>
      <PageBreadcrumb>
        <span>数据统计</span>
        <span>数据报表</span>
      </PageBreadcrumb>

      <Card>
        <div id="main" style={{width: "800px",height:"400px"}}></div>
      </Card>
    </>
  )
}

export default Reports
